<template>
	<view class="login-page">
		<view class="bg"></view>
		<view class="content">
			<view class="form-card">
				<image src="/static/logo.png" class="logo" />
				<view class="brand">PUREADMIN</view>
				<form @submit.prevent="submit">
					<view class="input" :class="{ focus: focusField==='user' }">
						<text class="ic iconfont icon-user"></text>
						<input v-model="username" placeholder="请输入管理员用户名" @focus="focusField='user'" @blur="focusField=''" />
					</view>
					<view class="input" :class="{ focus: focusField==='pwd' }">
						<text class="ic iconfont icon-a-eyeclose-fill" style="opacity:0.001;width:0;height:0;position:absolute;left:-9999px"></text>
						<text class="ic iconfont icon-rizhiguanli"></text>
						<input :type="showPwd? 'text':'password'" v-model="password" placeholder="请输入密码" @focus="focusField='pwd'" @blur="focusField=''" />
						<text class="eye iconfont" :class="showPwd? 'icon-chakan':'icon-a-eyeclose-fill'"
							@click="toggleShowPwd"
							@mousedown.prevent="pressShow"
							@mouseup="releaseShow"
							@mouseleave="releaseShow"
							@touchstart.prevent="pressShow"
							@touchend="releaseShow"></text>
					</view>
					<button type="primary" class="btn" @click="submit" :loading="loading">登录</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return { 
			username:'admin', 
			password:'', 
			loading:false, 
			showPwd:false, 
			focusField:''
		}
	},
	mounted(){
		// 检查uniCloud是否可用
		if(typeof uniCloud === 'undefined') {
			console.error('uniCloud未初始化')
			uni.showToast({title: '云服务未初始化，请检查配置', icon:'none'})
		}
	},
	methods:{
		async submit(){
			if(!this.username||!this.password){ return uni.showToast({title:'请输入账号和密码',icon:'none'}) }
			this.loading = true
			try{
				if(typeof uniCloud === 'undefined') {
					throw new Error('uniCloud服务未初始化')
				}
				
				console.log('开始登录...')
				console.log('登录参数:', {
					username: this.username,
					password: '***'
				})
				
				// 直接执行登录
				const loginRes = await uniCloud.callFunction({
					name: 'login',
					data: {
						action: 'login',
						username: this.username,
						password: this.password
					}
				})
				
				console.log('登录响应:', loginRes)
				const result = loginRes.result
				if(!result || result.code !== 0){
					const errorMsg = result && result.msg || '登录失败'
					return uni.showToast({ title: errorMsg, icon:'none' })
				}
				const token = result.token
				const userInfo = result.userInfo || {}
				uni.setStorageSync('uni_id_token', token)
				uni.setStorageSync('userInfo', userInfo)
				
				console.log('登录成功，用户信息:', userInfo)
				console.log('登录token:', token)
				
				// 根据用户角色跳转到不同页面
				if(userInfo.role && userInfo.role.includes('admin')) {
					uni.reLaunch({ url:'/pages/admin/analytics/index' })
				} else {
					uni.reLaunch({ url:'/pages/index/index' })
				}
			}catch(e){
				console.error('登录异常详情:', e)
				let errorMsg = '网络异常，请稍后重试'
				if(e && e.message) {
					if(e.message.includes('split')) {
						errorMsg = 'uniCloud配置异常，请检查云服务配置'
					} else {
						errorMsg = e.message
					}
				}
				uni.showToast({title: errorMsg, icon:'none'})
			}finally{ this.loading=false }
		},
		toggleShowPwd(){ this.showPwd = !this.showPwd },
		pressShow(){ this.showPwd = true },
		releaseShow(){ setTimeout(() => { this.showPwd = false }, 500) }
	}
}
</script>

<style scoped>
@import url('@/static/fonts/iconfont.css');
.login-page{position:relative;min-height:100vh;background:#fff;overflow:hidden}
.bg{position:absolute;left:0;top:0;bottom:0;width:55vw;background:url('/static/登录背景.png') no-repeat left bottom/cover}
.content{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;min-height:100vh;padding:0 12vw 0 8vw}
.form-card{width:720rpx;background:#fff;border:0;border-radius:16rpx;padding:44rpx 40rpx;box-shadow:none;display:flex;flex-direction:column;align-items:stretch}
.logo{width:120rpx;height:120rpx;margin:0 auto 6rpx}
.brand{text-align:center;font-size:42rpx;font-weight:700;letter-spacing:4rpx;color:#9aa1aa;margin-bottom:26rpx}
.input{display:flex;align-items:center;border:0;border-radius:14rpx;padding:0 24rpx;margin-bottom:24rpx;background:#fff;height:96rpx;box-shadow:none}
.input input{flex:1;height:100%;font-size:30rpx;background:#fff}
.ic{margin-right:18rpx;color:#9aa1aa;font-size:34rpx}
.eye{opacity:.8;margin-left:14rpx;color:#9aa1aa}
::placeholder{color:#b6bdc7}
.btn{margin-top:14rpx;background:#409eff;height:80rpx;border-radius:12rpx;font-size:30rpx;width:100%}
@media (max-width: 900px){
	.bg{display:none}
	.content{justify-content:center;padding:0 24rpx}
	.form-card{width:100%}
}
</style> 